<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
	var index = 1;
	$("button").click(function(){
		var effects = ['blind','clip','drop','explode','scale'];
		var i = Math.floor(Math.random()*effects.length);
		var j = Math.floor(Math.random()*effects.length);
		$("#imgHolder").hide(effects[i], 1000, function(){
			index = (++index)%4;
			if(index == 0) index=4;
			$(this).attr("src","images/"+index+".jpg").show(effects[j],1000);
		});
	})
})
</script>
<style type="text/css">
div{
	height:100px;
	width:100px;
}
</style>
</head>
<body>
<div>
	<img id="imgHolder" src="images/1.jpg" />
</div>
<button>切换到下一张</button>
</body>
</html>